import React from 'react';
import { Menu, Dropdown, Space } from 'antd';
import { DownOutlined, SmileOutlined } from '@ant-design/icons';
import { Link } from "react-router-dom";

import {
    AppstoreOutlined,
    CalendarOutlined,
    LinkOutlined,
    MailOutlined,
    SettingOutlined,
    LogoutOutlined,
  } from '@ant-design/icons';

function NavBar({user}){

    const items = [
        {
            key: '1',
            icon: <LinkOutlined />,
            label: (
              <Link to="/">
                大厅
              </Link>
            ),
        },
        {
          key: '2',
          icon: <CalendarOutlined />,
          label: '游戏',
          disabled: true
        },
        {
          key: '3',
          label: '设置',
          icon: <AppstoreOutlined />,
          disabled: true,
          children: [
            { key: '3a', label: 'Option 1' },
            { key: '3b', label: 'Option 2' },
            { key: '3c', label: 'Option 3' },
            { key: '3d', label: 'Option 4' }
          ],
        },
      ];

    return (
    <>
        <div className="demo-logo" />
        <Menu
            theme="dark"
            mode="horizontal"
            items={items}
            style={{
              flex: 1,
              minWidth: 0,
            }}
        >
        </Menu>


        <Dropdown
          menu={{
            items: [
              {
                key: '1',
                icon: <LogoutOutlined />,
                label: '登出'
              },
            ],
            onClick: (param)=>{
              console.log("handleDropMenuClick", param)
              localStorage.removeItem('card_player')
              location.reload()
            }
          }}
        >
          <a onClick={(e) => e.preventDefault()}>
            <Space>
              {user?.username}
              <DownOutlined />
            </Space>
          </a>
        </Dropdown>
        
        <div style={{color: 'white'}}></div>
    </>
)
}

export default NavBar
